import { ElDialog, ElButton, ElInput } from "element-plus";
import { createVNode, defineComponent, reactive, render } from "vue";

const DialogComponent = defineComponent({
  props: {
    option: { type: Object },
  },
  setup(props, ctx) {
    const state = reactive({
      option: props.option,
      isShow: false,
    });
    ctx.expose({
      showDialog(option) {
        state.option = option;
        state.isShow = true;
      },
    });

    const onCancel = () => {
      state.isShow = false;
    };

    const onConfirm = () => {
      state.isShow = false;
      // state.option.onConfirm && state.option.onConfirm(state.option.content);
      state.option.onConfirm?.call(state.option, state.option.content);
    };

    return () => {
      return (
        <ElDialog v-model={state.isShow} title={state.option.title}>
          {{
            default: () => (
              <ElInput
                type="textarea"
                rows={30}
                v-model={state.option.content}
              ></ElInput>
            ),
            footer: () =>
              state.option.footer && (
                <div>
                  <ElButton onClick={onCancel}>取消</ElButton>
                  <ElButton onClick={onConfirm} type="primary">
                    确定
                  </ElButton>
                </div>
              ),
          }}
        </ElDialog>
      );
    };
  },
});
let vm;

export function $dialog(option) {
  if (!vm) {
    let el = document.createElement("div");
    vm = createVNode(DialogComponent, { option });
    render(vm, el);
    document.body.appendChild(el);
  }
  let { showDialog } = vm.component.exposed;
  showDialog(option);
}
